iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0

在說到lottie動畫前,我先將自己常用的lottie動畫素材網站放上來,不只有json檔,甚至是aep也會有,也可以上傳自己做的動畫與他人分享。

https://lottiefiles.com/
https://ithelp.ithome.com.tw/upload/images/20200917/20130312Zaiz4kln33.png
那廢話不多說,我們開始吧!!

何謂Lottie動畫?

由Airbnb開發出,能夠將設計師製作好的AE動畫轉檔成json,並且讓工程師能夠簡單的運用在程式尚亦不需花費大把時間刻你的動畫(工程師友善工具?)
但lottie百百種優點後,卻有一個缺點,就是無法使用太複雜的特效及功能,目前已知可使用之特效或功能為:

1.Pre-compostion(預合成)-其實就跟組成群組差不多

https://ithelp.ithome.com.tw/upload/images/20200917/20130312iWwcYV0DjO.png

2.Keyframe Interpolation(影格補差值)-關鍵影格的用法

https://ithelp.ithome.com.tw/upload/images/20200917/20130312DLbzPreMYq.png

3.Solids(色塊)-雖然人家好像都翻固體,基本上是拿來作為效果的媒介,以便自己找得到那一個特效。等做好特效只要在Modes裡面選擇Add弄進要放製造效果的畫面就可以了。

https://ithelp.ithome.com.tw/upload/images/20200917/20130312gFlThAwSds.png

4.Masks(遮色片)-之後會跟後面動畫一起說

https://ithelp.ithome.com.tw/upload/images/20200917/20130312DYadfCYKBC.png

5.Track Mattes(追蹤)-其實只是告訴你他附屬於誰

https://ithelp.ithome.com.tw/upload/images/20200917/20130312D713tlm4Ua.png

6.Parenting(父子關係)-十分白話,但是使用上直觀也真的如此。只要將上面的螺旋狀按著拉到要跟著移動的主體上即可跟著該主體跑跑跳跳。

https://ithelp.ithome.com.tw/upload/images/20200917/20130312B1raTWYSj3.png

7.Shape Layers/Stroke (圖形/線條)-這應該我不用多說了吧W

https://ithelp.ithome.com.tw/upload/images/20200917/20130312jfA5twIckh.png

8.Trim Paths(修改路徑)-只要是鋼筆畫出來的路徑,不管你在AE畫的還是AI畫的,只要按鋼筆工具就能修改路徑。

https://ithelp.ithome.com.tw/upload/images/20200917/20130312KeSKcK4g5s.png

那麼,明天我會告訴各位如何簡單轉json檔喔,就這樣,不務正業的魚魚要去偷懶啦~明天見!


上一篇
鐵人賽Day3-第二章:After Effect 基礎面板介紹
下一篇
鐵人賽Day5-第四章:json檔的轉換
系列文
做動畫?!抱歉了時間,但我真的需要那個酷東西 ฅ^•ω•^ฅ30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言